<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Getter } from 'vuex-class'
import { Component } from 'vue-property-decorator'
@Component
class App extends Vue {
  @Getter('theme') theme!: 'dark' | 'light'
  directive_list: string[][] = []
  mounted() {
    this.startGenerateDirective()
    this.initStyleTheme()
    // const socket = new WebSocket('ws://192.168.22.68:8007/')
    // socket.addEventListener('message', function (event) {
    //   console.log('Message from server ', event.data)
    // })
  }
  destroy() {
    window.removeEventListener('keydown', () => {
      return
    })
  }
  startGenerateDirective() {
    let result: string[] = []
    window.addEventListener('keydown', e => {
      result.push(e.key)
      if (result[0] !== 'Shift') result = []
      if (result[1] && result[1] !== '^') result = []
      if (result[result.length - 1] === 'Enter') {
        const pre_res = result.slice(2, result.length - 1).filter(char => char !== 'Shift')
        result = pre_res
        this.$broadEmit('onDirectiveCollected', {
          fullPath: this.$route.fullPath,
          value: result.join('')
        })
      }
    })
  }
  initStyleTheme() {
    const store_theme = localStorage.getItem('pcls-prefer-theme')
    if (!store_theme) {
      localStorage.setItem('pcls-prefer-theme', this.theme)
    } else {
      this.$store.dispatch('theme/changeTheme', {
        theme: store_theme
      })
    }
  }
}
export default App
</script>

<style lang="less">
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
body {
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.message-popover {
  padding: 0 !important;
}
.el-popper[x-placement^='bottom'] .popper__arrow::after {
  #color(border-bottom-color, --primary-bg-color);
}
</style>
